<template>
    <div class="title">
        <span>.</span>相关资讯
    </div>
    <div class="allArticle">
        <div v-if="!artilce">
            <div v-for="i in 5" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 100px">
                </el-skeleton>
            </div>
        </div>
        <div v-for="(item, index) in  artilce " :key="item.id">
            <router-link :to="{ query: { id: item.id }, name: 'article' }">
                <el-image style="width: 100%; height: 150px;margin-bottom: 5px;" :src="item.face" :fit="fit"
                    v-if="index == 0">
                    <template #placeholder>
                        <el-image src="https://www.sucaijishi.com/uploadfile/2018/0919/20180919030733948.gif" :fit="fit"
                            style="width: 100%; height: 150px;margin-bottom: 5px;" v-if="index == 0" />
                    </template>

                </el-image>
                <div>
                    {{ item.title }}
                </div>
            </router-link>
            <el-divider />
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
export default {
    name: "slideTagComponents",
    props: {
        tag: {
            type: String,
        }
    },
    setup(props,) {
        let artilce = ref();
        let title = ref(['新闻资讯', '精彩活动', '红色景点', '人物故事', '红色文化', '红色历史']);
        let t = ref(Math.floor(Math.random() * 6));
        let getInfo = () => {
            while (title.value[t.value] == props.tag) {
                t.value = Math.floor(Math.random() * 6)
            }
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/articleGet/getArticleByTag/",
                data: {
                    tag: title.value[t.value],
                    page: 1,
                    sizes: 5,
                },
                success(resp) {

                    artilce.value = resp.article;
                }
            })
        };
        getInfo();
        return {
            artilce,
        }
    }
}

</script>
<style scoped>
.main {
    height: auto;
    margin-bottom: 30px;
}

span {
    color: rgb(214, 0, 28);
    background: rgb(214, 0, 28);
    width: 5px;
    border-radius: 19px;
    margin-right: 5px;
}

.title {
    margin-bottom: 5px;
}

.el-divider--horizontal {
    margin: 15px 0;
}

a {
    text-decoration: none;
    color: rgb(64, 64, 64);
    font-size: 15px;
    font-weight: 300;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a:hover {
    color: red;
}

image :hover {
    cursor: pointer;
}
</style>